<script setup lang="ts">
defineOptions({
  name: "ALL_FAB_PROVISION_AREA"
});

import { ref, onMounted, nextTick, provide, getCurrentInstance } from "vue";
import { useRoute } from "vue-router";
import { useRouterStoreHook } from "@/store/modules/router";
import ReTeleport from "@/components/ReTeleport";
import search from "../components/search.vue";
import fabArea from "../components/area.vue";
import fabGroup from "../components/group.vue";
import { areaes } from "../constant";

const { proxy }: any = getCurrentInstance();
const route = useRoute();
const routerStore = useRouterStoreHook();

const period = ref<string>("week");
const provisionAreaStyle = ref<Record<string, any>>(null);
const isShowArea = ref<boolean>(true);
const searchRef = ref<InstanceType<typeof search> | null>(null);
const fabAreaRef = ref<InstanceType<typeof fabArea> | null>(null);
const fabGroupRef = ref<InstanceType<typeof fabGroup> | null>(null);
const provisionAreaParams = ref<Record<string, any> | null>(null);
const groupParams = ref<Record<string, any> | null>(null);
const selectArea = ref<string>("");
const dataTypes = ref<Array<string>>([]);
const defaultparameter = ref<Record<string, any>>({});

const fabAreaKey = ref<string>(Math.random().toString(36).slice(2, 10));
const fabGroupKey = ref<string>(Math.random().toString(36).slice(2, 10));

provide("defaultparameter", defaultparameter);
provide("period", period);

const selectAreaHandler = async (item?: any) => {
  if (item) {
    const { label = "", value = "" } = item;
    selectArea.value = label;
    setStyle(value);
    isShowArea.value = false;
    groupParams.value = getParams(true);
    await nextTick();
    await fabGroupRef.value.init(dataTypes.value);
  } else {
    setStyle();
    isShowArea.value = true;
    provisionAreaParams.value = getParams();
    await nextTick();
    await fabAreaRef.value.init(dataTypes.value);
  }
};

const getParams = (flag?: boolean) => {
  const className = routerStore.getSubject !== "ALL" ? routerStore.getSubject : "";
  const p = searchRef.value?.getParams();
  const area = selectArea.value;
  const params = { ...p, className };
  if (flag) {
    params["area"] = area;
  }
  return params;
};

/**
 * @description:  search change 事件
 * @param {*} params  搜索条件参数
 * @param {*} types   数据选择
 * @param {*} flag    是否首次触发
 * @param {*} flag2   是否物料数据改变
 * @param {*} flag3   是否从全不选到选择
 * @return {*}
 */
const searchChangeHandler = async (
  params: Record<string, any>,
  types: Array<string>,
  flag: boolean = false,
  flag2: boolean = false,
  flag3: boolean = false
) => {
  dataTypes.value = types;
  await nextTick();
  if (isShowArea.value) {
    fabAreaKey.value = Math.random().toString(36).slice(2, 10);
    await nextTick();
    provisionAreaParams.value = getParams();
    await fabAreaRef.value.init(types);
  } else {
    fabGroupKey.value = Math.random().toString(36).slice(2, 10);
    await nextTick();
    if (flag) {
      const {
        query: { area = "" }
      } = route;
      area && (selectArea.value = area as string);
    }
    groupParams.value = getParams(true);
    await fabGroupRef.value.init(types);
  }
};

const selectChangeHandler = (val: any) => {
  defaultparameter.value = val;
};

const setStyle = (groupValue?: string) => {
  const bgImg = groupValue
    ? proxy.useGetStaticUrl(`/ifp-web-static/image/fab/provision/area/${groupValue}.png`)
    : proxy.useGetStaticUrl("/ifp-web-static/image/fab/provision/area/area.png");
  const backgroundImage = `url(${bgImg})`;
  const backgroundSize = !groupValue ? "100% 100%" : "88% 88%";
  const backgroundPosition = !groupValue ? "center center" : "50% 88%";
  provisionAreaStyle.value = { backgroundImage, backgroundSize, backgroundPosition };
};

const init = async () => {
  const {
    query: { type = "area" }
  } = route;
  isShowArea.value = type === "area";
  setStyle();
  // 调试
  // selectAreaHandler(areaes.get("EPI"));
};

onMounted(() => {
  init();
});
</script>

<template>
  <div class="provision-area" :style="{ ...provisionAreaStyle }">
    <ReTeleport placement="left" :width="182">
      <div class="provision-area-search">
        <search ref="searchRef" v-model:period="period" @change="searchChangeHandler" @selectChange="selectChangeHandler" />
        <!-- 调试 -->
        <!-- <search ref="searchRef" v-model:period="period" parameter="GC01BG01AV01" @change="searchChangeHandler" @selectChange="selectChangeHandler" /> -->
      </div>
    </ReTeleport>
    <div class="provision-area-content">
      <transition name="fade">
        <fabArea v-if="isShowArea" ref="fabAreaRef" :key="fabAreaKey" :params="provisionAreaParams" @select="selectAreaHandler" />
        <fabGroup v-else ref="fabGroupRef" :key="fabGroupKey" :params="groupParams" :selectArea="selectArea" @select="selectAreaHandler" />
      </transition>
    </div>
  </div>
</template>

<style lang="scss" global>
.provision-area-search {
  box-sizing: border-box;
  width: 100%;
  padding: 0 16px 16px;
}
</style>

<style lang="scss" scoped>
.provision-area {
  position: relative;
  width: 100%;
  min-width: 600px;
  height: 100%;
  min-height: 300px;
  background-repeat: no-repeat;
  background-attachment: scroll;
  background-position: center center;
  background-size: 100% 100%;
  transition: background-image 0.6s;

  .provision-area-content {
    width: 100%;
    height: 100%;

    .fade-enter-active,
    .fade-leave-active {
      transition: opacity 0.6s;
    }

    .fade-enter-from,
    .fade-leave-to {
      opacity: 0;
    }
  }
}
</style>
